<template>
  <el-form-item :label="label">
    <el-select
      v-model="value"
      :placeholder="'请选择' + label"
      clearable
      @change="changeHandler"
      filterable
    >
      <template v-for="(dic, index) in dictionaries" :key="index">
        <el-option v-if="typeof dic == 'string'" :value="dic" :label="dic" />

        <el-option
          v-else-if="dic.visiable == null || dic.visiable"
          :value="dic[valueKey]"
          :label="dic[labelKey]"
        />
      </template>
    </el-select>
  </el-form-item>
</template>
<script>
import dictionary from '@/config/dictionary'

export default {
  name: 'SearchSelect',
  emits: ['update:modelValue'],
  props: {
    modelValue: {
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    dicKey: {
      type: String,
    },
    dics: {
      type: Array,
    },
    search: {
      type: Function,
    },
    filterable: {
      type: Boolean,
      default: () => {
        return false
      },
    },
    valueKey: {
      type: String,
      default: 'value',
    },
    labelKey: {
      type: String,
      default: 'label',
    },
  },
  computed: {
    dictionaries() {
      return this.dics ? this.dics : dictionary[this.dicKey]
    },
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      },
    },
  },

  methods: {
    changeHandler() {
      if (this.search) this.search(1)
    },
  },
}
</script>
